<template>
  <div>
    <div>
      <p class="title">商城订单</p>
    </div>
    <div class="headerbox">
      <div class="box1">
        <div>
          <span>状态：</span>
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <div>
          <el-date-picker
            v-model="value1"
            type="daterange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
      </div>
      <div>
        <div class="box2 el-icon-search">
          <input v-model="input" placeholder="搜索订单号/用户昵称/手机号" />
        </div>
      </div>
    </div>
    <div class="h3">
      <h3>共收到商品总金额：{{ userAllnum }}</h3>
      <h3>钻石抵扣：{{ useDateNum }}</h3>
      <h3>实际共收：{{ useDateNum }}</h3>
    </div>
    <div class="tab">
      <el-table :data="tableData6" border style="width: 100%">
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>

        <el-table-column prop="ordernum" label="订单编号" width="100">
        </el-table-column>
        <el-table-column prop="name" label="优惠券名称"> </el-table-column>
        <el-table-column prop="adress" label="所属门店"> </el-table-column>
        <el-table-column prop="coupon" label="消费券码"> </el-table-column>

        <el-table-column prop="username" label="用户昵称"> </el-table-column>

        <el-table-column prop="phone" label="手机号"> </el-table-column>
        <el-table-column prop="indate" label="有效期"> </el-table-column>
        <el-table-column prop="total" label="商品总金额"> </el-table-column>

        <el-table-column prop="deduction" label="钻石抵扣"> </el-table-column>
        <el-table-column prop="pay" label="实际支付"> </el-table-column>
        <el-table-column prop="paytime" label="付款时间"> </el-table-column>
        <el-table-column prop="deltime" label="核销时间"> </el-table-column>
        <el-table-column prop="state" label="状态"> </el-table-column>
        <el-table-column   label="操作"    width="85px">
          <template slot-scope="scope">
            <el-link type="primary" @click="ck(scope.row)">查看</el-link>
                  <el-link type="primary" v-if="scope.row.state=='已完成'" style=" margin-left: 5px">退款</el-link>
            <!-- 弹框 -->
            <el-dialog title="订单详情" :visible.sync="dialogTableVisible"
            :before-close="handleClose">
              <div class="box1-1">
                <h3>订单信息：</h3>
                <div class="box1-2">
                  <div>
                    <span>优惠券名称：</span>
                    <span>{{ scope.row.name }}</span>
                  </div>
                  <div>
                    <span>消费券码：</span>
                    <span>{{ scope.row.actime }}</span>
                  </div>
                  <div>
                    <span>有效期：</span>
                    <span>{{ scope.row.type }}</span>
                  </div>
                  <div>
                    <span>所属门店：</span>
                    <span>{{ scope.row.state }}</span>
                  </div>
                  <div>
                    <span>状态：</span>
                    <span>{{ scope.row.state }}</span>
                  </div>
                  <div>
                    <span>核销时间：</span>
                    <span>{{ scope.row.state }}</span>
                  </div>
                </div>
              </div>

              <div class="box1-1">
                <h3>订单信息：</h3>
                <div class="box1-2">
                  <div>
                    <span>商品总金额：</span>
                    <span>{{ scope.row.actime }}</span>
                  </div>
                  <div>
                    <span>钻石抵扣：</span>
                    <span>{{ scope.row.type }}</span>
                  </div>
                  <div>
                    <span>实际支付：</span>
                    <span>{{ scope.row.state }}</span>
                  </div>
                  <div>
                    <span>订单编号：</span>
                    <span>{{ scope.row.state }}</span>
                  </div>
                  <div>
                    <span>支付方式：</span>
                    <span>{{ scope.row.state }}</span>
                  </div>
                  <div>
                    <span>提交时间：</span>
                    <span>{{ scope.row.state }}</span>
                  </div>
                  <div>
                    <span>付款时间：</span>
                    <span>{{ scope.row.state }}</span>
                  </div>
                  <div></div>
                  <div></div>
                </div>
              </div>
              <div class="box1-1">
                <h3>用户信息：</h3>
                <div class="box1-2">
                  <div>
                    <span>用户昵称：</span>
                    <span>{{ scope.row.name }}</span>
                  </div>
                  <div>
                    <span>手机号：</span>
                    <span>{{ scope.row.actime }}</span>
                  </div>
                  <div></div>
                </div>
              </div>

              <!-- v-if 线下 -->
                <div class="box1-1" v-if="scope.row.type=='线下活动'">
                <h3>报名人信息：</h3>
                <div class="box1-2">
                  <div>
                    <span>姓名：</span>
                    <span>{{ scope.row.name }}</span>
                  </div>
                  <div>
                    <span>手机号：</span>
                    <span>{{ scope.row.actime }}</span>
                  </div>
                  <div>
                      <span>身份证号：</span>
                    <span>{{ scope.row.actime }}</span>
                  </div>
                  <div>
                      <span>所在地：</span>
                    <span>{{ scope.row.actime }}</span>
                  </div>
                </div>
              </div>
               <span slot="footer" class="dialog-footer">
    <el-button @click="dialogTableVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
  </span>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>

      <Page
        :total="total"
        :PageNumber.sync="PageNumber"
        :PageSize.sync="PageSize"
        @current-change="changeCurrentPage"
        @size-change="handleSizeChange"
      >
      </Page>
    </div>
  </div>
</template>

<script>
import Page from "../../components/page.vue";
export default {
  components: {
    Page,
  },

  data() {
    return {
    
      PageNumber: 1,
      PageSize: 20,
      total: 50,
      options: [
        {
          value: "全部",
          label: "全部",
        },
        {
          value: "待支付",
          label: "待支付",
        },
        {
          value: "已完成",
          label: "已完成",
        },
        {
          value: "已过期",
          label: "已过期",
        },
      ],
      value: "",
      value1: "",
      // 搜索
      input: "",
      //  h3
      userAllnum: 10000,
      useDateNum: 10000,
      // tab
      dialogTableVisible: false,
      tableData6: [
        {
          ordernum: "123123",
          name: "tom",
          adress: "100",
          coupon: "100",
          coupon: "100",
          username: "100",
          phone: "0",
          indate: "2021",
          total: "2021",
          deduction: "zhansan",
          pay: "已完成",
          paytime: "线上活动",
          deltime:"-",
          state:"已完成"
          
        },
        {
          ordernum: "123123",
          name: "tom",
          actime: "100",
          cantime: "100",
          coupon: "100",
          username: "100",
          phone: "0",
          indate: "2021",
          total: "2021",
          deduction: "zhansan",
          pay: "已完成",
          paytime: "线下活动",
          deltime:"-",
          state:"未完成"
                  },
      ],
    };
  },
  methods: {
    changeCurrentPage(val) {
      console.log(val);
    },
    //改变每页显示条数
    handleSizeChange(val) {
      console.log(val);
    },
    // 查看
    ck(data) {
      this.dialogTableVisible = true;
      console.log(data, this.dialogTableVisible);
    },
    // 弹框
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
  },
};
</script>
<style lang="scss" scoped>
.title {
  margin-top: -10px;
  font-size: 14px;
}
.el-date-picker {
  margin-left: 20px;
 
}
.box2 {
  width: 240px;
  height: 32px;
  line-height: 32px;
  border-radius: 8px;
  background-color: rgb(242, 242, 242);
  display: flex;
  input {
    width: 240px;
    height: 32px;
    border-style: none;
    border-radius: 8px;
    outline: none;
    margin-left: 10px;
    background-color: rgb(242, 242, 242);
  }
}
.headerbox {
  display: flex;
  justify-content: space-between;
}
.box1 {
  display: flex;
  justify-content: space-between;
  width: 650px;
}
.h3 {
  display: flex;
  background-color: rgb(242, 242, 242);
  padding-left: 40px;
  h3 {
    margin-right: 40px;
  }
}
.tab {
  margin-top: 20px;
}
.box1-1 {
  padding: 0 20px 0px 20px;
  border-bottom: 1px solid #ccc;
  .box1-2 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    div {
      width: 200px;
      margin-bottom: 20px;
    }
  }
}
</style>